<template>
  <div class="bgbox">
    <div class="bgboxleft" style="min-width: 230px">
      <el-input v-model="filterText" placeholder="输入名称进行搜索" />

      <el-tree
        @node-click="treedatachange"
        ref="treeRef"
        class="filter-tree"
        :data="kerneldata"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
      />
    </div>

    <div class="bgboxright">
      <el-form :model="form" label-width="120px">
        <el-form-item label="标识">
          <el-input v-model="form.Name" disabled />
        </el-form-item>
        <el-form-item label="参数值">
          <el-select v-model="form.parameter" class="m-2" placeholder="Select" style="width: 240px">
            <el-option v-for="(item, index) in parameterselsect" :key="index" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="说明">
          <el-input v-model="form.Explain" type="textarea" disabled />
        </el-form-item>
      </el-form>
      <div class="save"><el-button type="success" @click="save">保存</el-button></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import { ElTree } from "element-plus";
//
import { GetSelHeXinXinXiport, GetSelCanShuZhiport, PostSaveHeXinXinXiport } from "@/api/modules/user";
import { ElMessage } from "element-plus";
const kerneldata = ref<any>([]);
const form = ref<any>({
  Explain: "",
  Name: "",
  parameter: ""
});
const parameterselsect = ref<any>([]);
const filterText = ref<any>("");
const treeRef = ref<any>();

const treedatachange = (data: any) => {
  if (data.Type != 1) {
    parameterselsect.value = data.CanShuZHi ? data.CanShuZHi : "";
    form.value.parameter = data.CanShuZHi[0] ? data.CanShuZHi[0] : "";

    form.value.Explain = data.Explain ? data.Explain : "";
    form.value.Name = data.Name ? data.Name : "";
    const datas = {
      strBiaoShi: data.Name
    };
    GetSelCanShuZhiport(datas).then((res: any) => {
      console.log(res);
      if (res.Success == 0) {
        form.value.parameter = res.Data ? res.Data : data.CanShuZHi[0] ? data.CanShuZHi[0] : "";
      }
    });
  }
};

const defaultProps = {
  children: "children",
  label: "Name"
};

watch(filterText, val => {
  treeRef.value!.filter(val);
});

// 保存
const save = () => {
  const data = {
    Name: form.value.Name,
    Explain: form.value.Explain,
    CanShuZhi: form.value.parameter
  };
  console.log(data);

  if (data.CanShuZhi == null || data.CanShuZhi == "" || data.Name == "" || data.Explain == "") {
    return ElMessage({
      showClose: true,
      message: "请输入完整",
      type: "error"
    });
  }
  PostSaveHeXinXinXiport(data).then((res: any) => {
    console.log(res);
    if (res.Success == 0) {
      ElMessage({
        showClose: true,
        message: "保存成功",
        type: "success"
      });
    }
  });
};

// 单个搜索条件
// 过滤树形节点
// const filterNode = (value: any, data: any) => {
//   console.log(data);

//   if (!value) return true;
//   // return data.Name.includes(value) || (data.children && data.children.some(item => filterNode(value, item)));
//   return data.Name.includes(value) || (data.children && data.children.some(item => filterNode(value, item)));
// };

// 多个搜索条件
const filterNode = (value: any, data: any) => {
  console.log(data);
  if (!value) return true;
  return data?.Name?.includes(value) || data?.Explain?.includes(value) || data?.children?.some(item => filterNode(value, item));
};

const immediately = () => {
  GetSelHeXinXinXiport().then((res: any) => {
    console.log(res);
    if (res.Success == 0) {
      kerneldata.value = res.Data;
    }
  });
};

onMounted(() => {
  immediately();
  console.log(1111);
});
</script>

<style scoped lang="scss">
.bgbox {
  display: flex;
  width: 100%;
  height: 100%;
  .bgboxleft {
    width: 50%;
    overflow: auto;
    background-color: white;
  }
  .bgboxright {
    width: 50%;
    overflow: auto;
    .save {
      position: absolute;
      right: 20px;
      bottom: 50px;
    }
  }
}
</style>
